<template>
  <div
    class="floating-button-container"
    :style="{ right: position.right, top: position.top, zIndex: zIndex, }"
  >
    <svg-icon class="floating-button" style="height: 20px; width: 20px" :icon-class="isScreenFull?'exit-fullscreen':'fullscreen'" @click="handleClick" />
  </div>
</template>

<script>
export default {
  name: 'FloatingScreenFull',
  props: {
    // 按钮位置的属性，可以是数字（像素值）
    position: {
      type: Object,
      default: () => ({ right: '5px', top: '5px' })
    },
    // 按钮的z-index属性
    zIndex: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      isScreenFull: false
    }
  },
  methods: {
    handleClick() {
      // 按钮点击事件处理逻辑
      this.isScreenFull = !this.isScreenFull
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
.floating-button-container {
  position: absolute ;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.floating-button {
  cursor: pointer;
  transition: transform 0.2s; /* 平滑动画效果 */
}

.floating-button:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大 */
}
</style>
